<template>
  <div class="content-manage">
    <!-- 添加删除公用组件使用 -->
    <slot name="btnsBar"></slot>
    <slot name="farmtypeselectslot"></slot>
    <div ref="commonLayout" class="common-layout">
      <slot name="typenodeslot"></slot>
      <!-- 搜索行 -->
      <div class="search-box">
        <slot name="searchbox"></slot>
      </div>
      <!-- 其他内容 -->
      <slot></slot>
      <!-- 主要区域 -->
      <div class="content">
        <!-- 左侧表格区 -->
        <div class="table-box">
          <slot name="tablebox"></slot>
        </div>
        <!-- 右侧列表区 -->
        <div class="form">
          <slot name="form"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenHeight: document.body.clientHeight
    };
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val;
        this.timer = true;
        let that = this;
        // that.jisuanheight()
        setTimeout(function() {
          // 打印screenWidth变化的值
          that.jisuanheight();
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        // window.screenHeight = document.body.clientHeight
        // that.screenHeight = window.screenHeight
        that.screenHeight = document.body.clientHeight;
      })();
    };
    this.jisuanheight();
  },
  methods: {
    jisuanheight() {
      let parent = this.$refs.commonLayout;
      parent.style.setProperty("height", "100%");
      // 获取元素实际需要占据的高度
      let height = parent.scrollHeight - 60;
      let btnsBar = this.$slots.btnsBar;
      if (!btnsBar) {
        height = height + 60;
      }
      // 判断是否使用农场类型插槽,动态设置高度
      let farmtypenode = this.$slots.farmtypeselectslot;
      if (farmtypenode) {
        parent.style.setProperty("height", height - 40 + "px");
      } else {
        parent.style.setProperty("height", height + "px");
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
.content-manage {
  width: 100%;
  height: 100%;
  .common-layout {
    border: 1px dashed $borderColor;
    background-color: $contentColor;
    height: calc(100% - #{$actionBarHeight + 60});
    padding: 20px;
    position: relative;
    .search-box {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .label-input {
        display: flex;
        align-items: center;
        .label {
          min-width: 100px;
          white-space: nowrap;
          text-align: end;
          padding: 0 10px;
        }
      }
      .search {
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          height: 30px;
        }
      }
    }
    .content {
      height: calc(100% - 50px);
      margin: 20px 0;
      display: flex;
      .table-box {
        position: relative;
        height: 100%;
        width: 49%;
        overflow-y: auto;
        margin-left: 20px;
        margin-right: 40px;
      }
      .form {
        width: 49%;
        overflow-y: auto;
        display: flex;
        flex-direction: column !important;
        height: 100%;
        border-left: 1px dashed $borderColor;
        padding-left: 30px;
        ::v-deep .el-form-item {
          width: 100%;
        }
        ::v-deep .el-form-item__content {
          display: flex;
          align-items: center;
          text-align: center;
        }
        ::v-deep .el-form-item__label {
          min-width: 100px;
          text-align: end;
        }
        .el-form {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
        }
      }
    }
  }
} // 弹出框  统一样式
::v-deep .el-dialog__wrapper {
  background-color: rgba(124, 143, 143, 0.6);
  .el-dialog {
    background-color: rgba(240, 243, 247, 1);
    border: #000 1px solid;
    border-radius: 9px;
    overflow: hidden;
    color: #000;
    .el-dialog__header {
      width: 100%;
      background-color: rgba(0, 110, 145, 1);
      padding: 15px;
      .el-dialog__title {
        font-weight: 700;
      }
      .el-dialog__close {
        font-size: 22px;
        color: #fff;
        font-weight: 700;
      }
    }
    .el-dialog__body {
      overflow: hidden;
      // overflow-y: auto;
      .el-input__inner {
        color: #000;
        border-color: rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
      }
      .el-textarea__inner {
        color: #000;
        border-color: rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
      }
      .el-form {
        // display: flex;
        // flex-direction: row;
        // flex-wrap: wrap;
        // justify-content: space-around;
        width: 100%;
        .total-price {
          color: #000;
        }
        .el-row {
          width: 100%;
          margin-bottom: 10px;
          .el-table {
            max-height: 200px;
            overflow-y: auto;
            background-color: rgba(255, 255, 255, 1);
            .cell {
              color: #000;
            }
            th {
              background-color: rgba(230, 230, 230, 1);
            }
            th.is-leaf {
              border-color: rgba(77, 77, 77, 1);
            }
            td {
              border-color: rgba(77, 77, 77, 1);
            }
            tr:hover {
              background-color: rgba(77, 77, 77, 1);
            }
            .el-table__empty-text {
              color: #000;
            }
            .current-row {
              // background-color: rgb(177, 177, 177);
              background-color: #dbdbdb !important;
            }
            .el-table__row--striped {
              background-color: rgba(255, 255, 255, 1);
            }
            // color: #000;
          }
          .el-table--border {
            border-color: rgba(77, 77, 77, 1);
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
          }
          .el-table--enable-row-hover .el-table__body tr:hover > td {
            background-color: rgb(177, 177, 177);
          }
          .el-table__body tr.current-row > td {
            background-color: #dbdbdb !important;
          }
          // .el-button {
          //   width: 100%;
          // }
          .el-form {
            // width: 100%;
            // margin: ;
            .el-form-item {
              margin-bottom: 0 !important;
            }
            .el-form-item__content {
              display: flex;
              width: 100%;
              .el-select {
                min-width: 15%;
              }
              .el-input {
                min-width: 10%;
              }
              .el-input__inner {
                border-right: none;
              }
              .el-button {
                min-width: 5%;
                margin-left: 10px;
              }
            }
          }
        }
        .el-form-item {
          display: flex;
          .el-form-item__label {
            line-height: 36px;
            min-width: 140px;
            text-align: end;
            color: #000;
          }
          .el-form-item__content {
            line-height: 36px;
            width: 100%;
            display: flex;
            .el-input__inner {
              width: 100%;
            }
          }
        }
      }
    }
    .el-dialog__footer {
      width: 100%;
      border-top: 1px solid rgba(191, 191, 191, 1);
      position: inherit;
      text-align: right;
      padding: 15px;
    }
    .el-form-item__label {
      color: #000;
      font-weight: 400;
      font-size: 16px;
    }
  }
}
</style>
